<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  <title>Document</title>
  <style>
    @page{
      margin: 0;
    }
    html{
      font-size: 12px;
    }
    * {
      margin: 0;
      padding: 0;
    }
    .t_center{
      text-align: center;
    }

    ul,
    li {
      list-style: none;
    }

    #app {
      width: 180px;
      box-sizing: border-box;
      background-color: #fff;
    }

    .hr {
      overflow: hidden;
    }
    .hr_reduce{
      margin-bottom: 10px;
      overflow: hidden;
    }

    .list {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }

    .name {
      width: 70px;
    }

    .num {
      width: 30px;
      text-align: center;
    }

    .price {
      width: 35px;
      text-align: center;
    }

    .sum_price {
      width: 35px;
      text-align: right;
    }
    .count_price{
      display: flex;
      justify-content: space-between;
    }
    .mar{
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id='app'>
    <div>
      <h2 class="title t_center mar">
        {{title}}
      </h2>
      <h3 class="order_no t_center mar">
        订单号：{{printData.no}}
      </h3>
      <div class="tip t_center mar">
        请在大屏留意您的订单号码取餐
      </div>
      <div class="hr">==========================</div>
      <ul class="tb">
        <li>
          <ul class="list">
            <li class="name">名称</li>
            <li class="num">数量</li>
            <li class="price">单价</li>
            <li class="sum_price">金额</li>
          </ul>
        </li>
        <li>
          <div class="hr_reduce t_center">------------------------------------------</div>
        </li>
        <li v-for="(item, index) in printData.foods">
          <ul class="list">
            <li class="name">{{item.name}}</li>
            <li class="num">x{{item.num}}</li>
            <li class="price">{{item.price.toFixed(2)}}</li>
            <li class="sum_price">{{(item.num * item.price).toFixed(2)}}</li>
          </ul>
        </li>
        <li><div class="hr mar">==========================</div></li>
        <li class="count_price mar">
          <div>合计：</div>
          <div>{{printData.foods | countPrice}}</div>
        <li><div class="hr mar">==========================</div></li>
      </ul>
      <div>下单时间：{{printData.ctime | formatTime}}</div>
    </div>
  </div>
</body>
<script>
  // 引入ipcRenderer对象
  const {
      ipcRenderer
  } = require('electron')
  new Vue({
    el: "#app",
    data: {
      title: '千玺机器人餐厅',
      printData: {
        no: 'A0001',
        foods: [
          { name: '香菇鸡腿饭', num: 1, price: 18 },
          { name: '红烧牛肉饭', num: 2, price: 18 },
          { name: '麻婆豆腐饭', num: 1, price: 18 },
          { name: '香菇鸡腿饭', num: 1, price: 18 },
          { name: '红烧牛肉饭', num: 2, price: 18 },
          { name: '麻婆豆腐饭', num: 1, price: 18 },
        ],
        ctime: new Date().getTime() - 1000,
      },
    },
    mounted() {
      ipcRenderer.on('ping', (e, printData) => { //接收响应
          this.printData = printData;
          ipcRenderer.sendToHost('pong') //向webview所在页面的进程传达消息
      })
    },
    filters: {
      countPrice(foods){
        let allPrice = 0;
        foods.forEach(item => {
          allPrice += item.num * item.price;
        });
        
        return allPrice.toFixed(2);
      },
      formatTime(timeStr){
        let time = new Date(timeStr);
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hour = time.getHours();
        let min = time.getMinutes();
        let second = time.getSeconds();
        month = month > 9 ? month : '0' + month;
        date = date > 9 ? date : '0' + date;
        hour = hour > 9 ? hour : '0' + hour;
        min = min > 9 ? min : '0' + min;
        second = second > 9 ? second : '0' + second;
        return year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + second;
      }
    },
    methods: {}
  })
</script>

</html>